<template>
	<view class="form">
		<view id="head_text">
			{{name}}
		</view>
		<uni-forms ref="form" :model="form" :rules="rules" :label-width="75" label-align="center">
			<uni-forms-item label="真实姓名" required name="name">
				<uni-easyinput v-model="form.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="身份证号" required name="cardNo">
				<uni-easyinput v-model="form.cardNo" placeholder="请输入身份证号" />
			</uni-forms-item>
			<uni-forms-item label="手机号码" required name="tel" v-if="form.productId!=5">
				<uni-easyinput v-model="form.tel" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="验证码" required name="code">
				<uni-easyinput v-model="form.code" type="number" placeholder="请输入验证码"
					style="width: 55%;display: inline-block;" />
				<view id="login-code">
					<image :src="codeUrl" @click="getCode" class="login-code-img" />
				</view>
			</uni-forms-item>
		</uni-forms>

		<view class="submit">
			<button @click="search()" type="primary" shape="round">
				立即查询 {{ zeroTwo(price)}}
			</button>
			<view class="radio">
				<checkbox-group @change="xz = !xz">
					<checkbox :checked="xz"></checkbox>
				</checkbox-group>
				同意
				<span @click="serveAgreeVisible=true">《服务协议》</span>
				<span @click="authAgreeVisible=true">《信息查询授权书》</span>
			</view>
		</view>

		<authAgree v-if="authAgreeVisible" :info="form" @readed="authAgreeVisible=false" />
		<serveAgree v-if="serveAgreeVisible" @readed="serveAgreeVisible=false" />

		<liu-drag-button @clickBtn="$tab.navigateTo('/pages/help')" :bottomPx="200" :rightPx="10">帮助</liu-drag-button>
	</view>
</template>

<script>
	import serveAgree from '@/components/serveAgree.vue'
	import authAgree from '@/components/authAgree.vue'

	import {
		getCodeImg
	} from '@/api/login'

	import {
		selfQueryInfo
	} from '@/api/product.js'

	import {
		addQueryPay
	} from '@/api/jinjian.js'

	export default {
		components: {
			serveAgree,
			authAgree
		},
		data() {
			return {
				serveAgreeVisible: false,
				authAgreeVisible: false,
				intervalwx: null,
				
				name: null,
				price: null,

				codeUrl: "",
				xz: false,

				form: {
					userId: this.$store.state.user.userid,
					productId: '',
					remark: 'alipaysign',
					
					name: '王江南',
					cardNo: '510181198908154211',
					tel: '18190943657',
					
					code: '',
					uuid: '',
					sign: ''
				},

				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					cardNo: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号'
						}, {
							validateFunction: function(rule, value, data, callback) {
								const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
								if (!reg.test(value)) {
									callback('请输入正确的身份证号')
								}
								return true
							}
						}]
					},
					tel: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								const reg = /^1[3456789]\d{9}$/;
								if (!reg.test(value)) {
									callback('请输入正确的手机号码')
								}
								return true
							}
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}]
					}
				}
			}
		},
		created() {
			this.getCode();
			this.$bus.$on('openReal', data => {
				this.$bus.$emit('sendInfo', this.form);
			});
		},
		onLoad(event) {
			if (event.id) {
				selfQueryInfo(event.id).then(res => {
					if (res.status != '0') {
						uni.showLoading({
							title: res.remark,
							mask: true,
							image: '../../static/images/icon/7.png'
						})
					};
					this.name = res.name;
					this.price = res.price;
					// this.form.sign = getSign();
					this.form.productId = event.id;
				});
			} else {
				this.$tab.navigateBack();
			}
		},
		methods: {
			getCode() {
				getCodeImg().then(res => {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
					if (this.captchaEnabled) {
						this.codeUrl = 'data:image/gif;base64,' + res.img
						this.form.uuid = res.uuid
					}
				})
			},

			search() {
				if (!this.xz) {
					this.$modal.msgError("请勾选协议");
					return
				}
				let path = ['', 'bdp', 'bd', 'com', 'mar', 'jud', 'imm', 'edu', 'mili'][this.form.productId]	
				this.$refs.form.validate().then(res => {
					this.$modal.loading("正在发起支付")
					addQueryPay(this.form).then(res => {
						this.$modal.closeLoading()
						let data = res.data

						console.log('----data---', data)
						
						// 启动轮询
						
						this.intervalwx = window.setInterval(() => {
							let _this = this
							state(data.id).then(res => {
								console.log(res)
								if (res.payState == 'SUCCESS') {
									_this.$tab.navigateTo('/pages/' + path + '?orderNo=' +
										res.orderNo);
									clearInterval(_this.intervalwx);
									_this.intervalwx = null;
								}
							})
						}, 1500)


						if (data.code == 200) {
							const payUrl = data.data.payUrl;
							window.location.href = payUrl;
						} else {
							this.$modal.msgError(data.msg)
						}

					}).catch(() => {
						this.getCode();
					})
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	.form {
		margin: 8px;
		background-color: #fff;
		border-radius: 10px;
		padding: 15px 20px;

		#head_text {
			text-align: center;
			color: #FE6602;
			font-size: 20px;
			margin-bottom: 15px;
		}


		#login-code {
			height: 38px;
			float: right;
			width: 180rpx;
			margin-right: 34rpx;

			.login-code-img {
				height: 38px;
				position: absolute;

				width: 200rpx;
			}
		}

		#yzman {
			background-color: #2979ff;
			padding: 3px;
			color: #fff;
			margin-left: 2px;
			border-radius: 4px;
		}

		.submit {
			text-align: center;

			.radio {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 6px;
				font-size: 12px;

				span {
					color: #375FE8
				}
			}
		}
	}
</style>